<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="styles.css">
    <style type="text/css">
        /* 表格样式 */
        #userTable {
          width: 100%;
          border-collapse: collapse;
        }

        #userTable th, #userTable td {
          padding: 8px;
          text-align: left;
          border-bottom: 1px solid #ddd;
        }

        #userTable th {
          background-color: #f2f2f2;
        }

        /* 头像样式 */
        #userTable img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
        }

        /* 复选框样式 */
        #userTable input[type="checkbox"] {
          margin-right: 5px;
        }
    </style>
</head>
<body>
    <table id="userTable">
      <thead>
        <tr>
          <th>头像</th>
          <th>选择</th>
          <th>姓名</th>
          <th>邮箱</th>
          <!-- 可以添加更多字段 -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><img src="img.png" alt="User 1 Avatar"></td>
          <td><input type="checkbox"></td>
          <td>张三</td>
          <td>zhangsan@example.com</td>
          <!-- 添加对应字段的值 -->
        </tr>
        <!-- 复制上面的<tr>来添加更多用户 -->
      </tbody>
    </table>

<script src="script.js">


</script>
</body>
</html>